<template>
  <div>
    <template v-if="authority">
      <div class="card-group mb-3">
        <div v-for="(item, key) in userTasks" class="card card-hover" :key="key">
          <div class="card-body p-3">
            <span class="task-title" :class="item.isCurrentTask ? 'font-weight-bold' : ''">
              {{ item.title }}
            </span>
            <div class="text-muted mb-2">
              <div v-for="(subItem, subIndex) in item.subTitle" :key="subIndex">
                <span>{{ subItem.prefix }}</span>
                <span :class="subItem.css">{{ subItem.num }}</span>
              </div>
            </div>
            <div v-for="(list, serial) in item.list" class="mb-2" :key="serial">
              <router-link :to="list.url" class="task-link">
                <div class="d-flex justify-content-between">
                  <small>
                    <span class="mr-3">{{ list.title }}</span>
                    <span>{{ list.num }}</span>
                  </small>
                  <small>{{ list.funds }} 万元</small>
                </div>
                <div class="progress-bar">
                  <div
                    class="progress-bar-full"
                    :class="`bg-${list.bgColor}`"
                    :style="{ width: `${list.percent}%` }"
                  ></div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>

      <h5 class="text-muted">{{ taskName }}</h5>

      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </template>
    <template v-else>
      <div class="p-5 text-center text-muted border rounded bg-light">
        如需使用该功能请联系数科公司： 唐超： 13985332965
      </div>
    </template>
  </div>
</template>

<script>
import { add } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'

const getNumber = str => +str || 0
const getPercent = (top, bottom) => (!bottom ? 0 : (top / bottom) * 100)
export const getNumAndPercent = (...args) => {
  const countArr = []
  let sum = 0
  for (let arg of args) {
    const count = getNumber(arg)
    sum = add(count, sum)
    countArr.push(count)
  }

  const data = []
  for (let i = 0; i < countArr.length; i++) {
    const count = countArr[i]
    data.push({
      count,
      percent: getPercent(count, sum),
    })
  }

  return { sum, data }
}

export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['job', 'taskCount', 'user']),
    scopes() {
      return this.user.scopes
    },
    authority() {
      const scopeArray = this.scopes.split('|')
      return scopeArray.includes('dirGua')
    },
    routeName() {
      return this.$route.name || ''
    },
    taskName() {
      const routes = this.$route.matched.slice(-2)
      return routes.map(item => item.meta.title).join('：')
    },
    tasks() {
      // 立项
      const prelimTotal = getNumAndPercent(
        this.taskCount.item_no_total,
        this.taskCount.item_yes_total,
        this.taskCount.item_confuse_total
      )
      const prelimFunds = getNumAndPercent(
        this.taskCount.item_no_funds,
        this.taskCount.item_yes_funds,
        this.taskCount.item_confuse_funds
      )

      // 审批
      const surveyTotal = getNumAndPercent(
        this.taskCount.check_no_total,
        this.taskCount.check_ing_total,
        this.taskCount.check_yes_total,
        this.taskCount.check_confuse_total
      )
      const surveyFunds = getNumAndPercent(
        this.taskCount.check_no_funds,
        this.taskCount.check_ing_funds,
        this.taskCount.check_yes_funds,
        this.taskCount.check_confuse_funds
      )
      // 合同审批
      const contractToal = getNumAndPercent(
        this.taskCount.contract_approval_no_total,
        this.taskCount.contract_approval_ing_total,
        this.taskCount.contract_approval_yes_total,
        this.taskCount.contract_approval_confuse_total
      )

      const contractFunds = getNumAndPercent(
        this.taskCount.contract_approval_no_funds,
        this.taskCount.contract_approval_ing_funds,
        this.taskCount.contract_approval_yes_funds,
        this.taskCount.contract_approval_confuse_funds
      )

      // 签约放款
      const registerTotal = getNumAndPercent(
        this.taskCount.loan_approval_no_total,
        this.taskCount.loan_approval_ing_total,
        this.taskCount.loan_approval_yes_total,
        this.taskCount.loan_approval_loan_yes_total
      )
      const registerFunds = getNumAndPercent(
        this.taskCount.loan_approval_no_funds,
        this.taskCount.loan_approval_ing_funds,
        this.taskCount.loan_approval_yes_funds,
        this.taskCount.loan_approval_loan_yes_funds
      )

      // 贷后
      const postloanTotal = getNumAndPercent(
        this.taskCount.load_beh_normal_total,
        this.taskCount.load_beh_expire_total,
        this.taskCount.load_beh_success_total,
        this.taskCount.load_beh_exc_total
      )
      const postloanFunds = getNumAndPercent(
        this.taskCount.load_beh_normal_funds,
        this.taskCount.load_beh_expire_funds,
        this.taskCount.load_beh_success_funds,
        this.taskCount.load_beh_exc_funds
      )

      return [
        {
          title: '项目立项',
          job: [
            'org_corp',
            'org_c_manage',
            'org_c_emp',
            'org_r_manage',
            'org_r_emp',
            'org_p_manage',
            'org_p_emp',
            'org_credit_super',
            'org_c_general',
            'org_c_general_emp',
            'org_f_manage',
            'org_f_emp',
          ],
          subTitle: [
            {
              prefix: '已受理项目：',
              num: prelimTotal.sum,
              css: '',
            },
          ],
          namePrefix: 'selfPrelim',
          list: [
            {
              title: '未立项',
              num: prelimTotal.data[0].count,
              percent: prelimTotal.data[0].percent,
              funds: prelimFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'selfPreliming' },
            },
            {
              title: '已立项',
              num: prelimTotal.data[1].count,
              percent: prelimTotal.data[1].percent,
              funds: prelimFunds.data[1].count,
              bgColor: 'success',
              url: { name: 'selfPrelimPass' },
            },
            {
              title: '已拒绝',
              num: prelimTotal.data[2].count,
              percent: prelimTotal.data[2].percent,
              funds: prelimFunds.data[2].count,
              bgColor: 'danger',
              url: { name: 'selfPrelimRefuse' },
            },
          ],
        },
        {
          title: '调查审批',
          job: [
            'org_corp',
            'org_c_manage',
            'org_c_emp',
            'org_r_manage',
            'org_r_emp',
            'org_p_manage',
            'org_p_emp',
            'org_credit_super',
            'org_c_general',
            'org_c_general_emp',
          ],
          subTitle: [
            {
              prefix: '已立项项目：',
              num: prelimTotal.data[1].count,
              css: '',
            },
          ],
          namePrefix: 'selfSurvey',
          list: [
            {
              title: '待调查',
              num: surveyTotal.data[0].count,
              percent: surveyTotal.data[0].percent,
              funds: surveyFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'selfSurveying' },
            },
            {
              title: '调查中',
              num: surveyTotal.data[1].count,
              percent: surveyTotal.data[1].percent,
              funds: surveyFunds.data[1].count,
              bgColor: 'warning',
              url: { name: 'selfSurveyApply' },
            },
            {
              title: '已通过',
              num: surveyTotal.data[2].count,
              percent: surveyTotal.data[2].percent,
              funds: surveyFunds.data[2].count,
              bgColor: 'success',
              url: { name: 'selfSurveyPass' },
            },
            {
              title: '未通过',
              num: surveyTotal.data[3].count,
              percent: surveyTotal.data[3].percent,
              funds: surveyFunds.data[3].count,
              bgColor: 'danger',
              url: { name: 'selfSurveyRefuse' },
            },
          ],
        },
        {
          title: '合同审批',
          job: [
            'org_corp',
            'org_c_manage',
            'org_c_emp',
            'org_r_manage',
            'org_r_emp',
            'org_p_manage',
            'org_p_emp',
            'org_credit_super',
            'org_c_general',
            'org_c_general_emp',
          ],
          subTitle: [
            {
              prefix: '已审查项目：',
              num: surveyTotal.data[2].count,
              css: '',
            },
          ],
          namePrefix: 'selfContract',
          list: [
            {
              title: '待审批',
              num: contractToal.data[0].count,
              percent: contractToal.data[0].percent,
              funds: contractFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'selfContractIng' },
            },
            {
              title: '审批中',
              num: contractToal.data[1].count,
              percent: contractToal.data[1].percent,
              funds: contractFunds.data[1].count,
              bgColor: 'warning',
              url: { name: 'selfContractLoan' },
            },
            {
              title: '待签约',
              num: contractToal.data[2].count,
              percent: contractToal.data[2].percent,
              funds: contractFunds.data[2].count,
              bgColor: 'primary',
              url: { name: 'selfContractSign' },
            },
            {
              title: '已签约',
              num: contractToal.data[3].count,
              percent: contractToal.data[3].percent,
              funds: contractFunds.data[3].count,
              bgColor: 'success',
              url: { name: 'selfContractPass' },
            },
          ],
        },
        {
          title: '放款登记',
          subTitle: [
            {
              prefix: '已签约：',
              num: contractToal.data[3].count,
              css: '',
            },
          ],
          namePrefix: 'selfRegister',
          list: [
            {
              title: '待审批',
              num: registerTotal.data[0].count,
              percent: registerTotal.data[0].percent,
              funds: registerFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'selfRegisterDone' },
            },
            {
              title: '审批中',
              num: registerTotal.data[1].count,
              percent: registerTotal.data[1].percent,
              funds: registerFunds.data[1].count,
              bgColor: 'warning',
              url: { name: 'selfRegisterIng' },
            },
            {
              title: '待登记',
              num: registerTotal.data[2].count,
              percent: registerTotal.data[2].percent,
              funds: registerFunds.data[2].count,
              bgColor: 'primary',
              url: { name: 'selfRegisterPass' },
            },
            {
              title: '已登记',
              num: registerTotal.data[3].count,
              percent: registerTotal.data[3].percent,
              funds: registerFunds.data[3].count,
              bgColor: 'success',
              url: { name: 'selfRegisterLoan' },
            },
          ],
        },
        {
          title: '贷后管理',
          job: [
            'org_corp',
            'org_c_manage',
            'org_c_emp',
            'org_r_manage',
            'org_r_emp',
            'org_p_manage',
            'org_p_emp',
            'org_credit_super',
            'org_c_general',
            'org_c_general_emp',
          ],
          subTitle: [
            {
              prefix: '已放款项目：',
              num: registerTotal.data[1].count,
              css: '',
            },
          ],
          namePrefix: 'selfPostloan',
          list: [
            {
              title: '在保项目',
              num: postloanTotal.data[0].count,
              percent: postloanTotal.data[0].percent,
              funds: postloanFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'selfPostloaning' },
            },
            {
              title: '即将到期',
              num: postloanTotal.data[1].count,
              percent: postloanTotal.data[1].percent,
              funds: postloanFunds.data[1].count,
              bgColor: 'primary',
              url: { name: 'selfPostloanExpir' },
            },
            {
              title: '解保项目',
              num: postloanTotal.data[2].count,
              percent: postloanTotal.data[2].percent,
              funds: postloanFunds.data[2].count,
              bgColor: 'success',
              url: { name: 'selfPostloanFinish' },
            },
            {
              title: '异常项目',
              num: postloanTotal.data[3].count,
              percent: postloanTotal.data[3].percent,
              funds: postloanFunds.data[3].count,
              bgColor: 'danger',
              url: { name: 'selfPostloanAbnormal' },
            },
          ],
        },
      ]
    },
    userTasks() {
      return this.tasks.filter(task => {
        const { namePrefix } = task
        task.isCurrentTask = this.routeName.includes(namePrefix)
        return true // !job || job.includes(this.job)
      })
    },
    userRouter() {
      return this.routeName && this.userTasks.length
        ? { name: this.routeName }
        : this.userTasks[0].list[0].url
    },
  },
  watch: {
    routeName() {
      this.initTask()
    },
  },
  created() {
    this.$store.dispatch('getTaskCount')
    this.initTask()
  },
  mounted() {},
  methods: {
    initTask() {
      if (!this.routeName || this.routeName !== this.userRouter.name) {
        this.$router.replace(this.userRouter)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.task-title {
  color: #333;
  font-size: 1.25rem;

  &.active {
    font-weight: bold;
    color: $primary;
    color: var(--primary);
  }
}

.card-hover {
  transition: all 0.3s;
  &:hover {
    box-shadow: 0 2px 6px $gray-400;
  }
}

.task-link {
  color: $gray-600;
  &.exact-active {
    color: $primary;
    color: var(--primary);
  }
}
</style>
